<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评论列表</title>
    <%- include  common %>
</head>
<body>
    <%-  include('head',{title:'list',username}) %>
    <div class="container container-fluid">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-lg-12">
                <h2 class="text-danger  text-center">评论列表</h2>
                <div class="row col-md-3 col-lg-3 col-sm-3" style="margin:10px 0px">
                    <select  class="form-control " id="select" data-page="<%- page %>">
                        <option value="5"  <%-pageSize==5 ?'selected':'' %> >每页5条</option>
                        <option value="10" <%-pageSize==10 ?'selected':'' %> >每页10条</option>
                        <option value="20" <%-pageSize==20 ?'selected':'' %> >每页20条</option>
                        <option value="40" <%-pageSize==40 ?'selected':'' %> >每页40条</option>
                    </select>
                </div>


                <table style="width:100%" class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr class="text-center text-danger">
                            <td>序号</td>
                            <td>评论人</td>
                            <td>评论标题</td>
                            <td>评论内容</td>
                            <td>电影名称</td>
                            <td>评论电影</td>
                            <td>时间</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody> 
                        <%    if(result.length > 0 ){       %>
                            <%     result.map((item,i)=>{       %>
                                <tr class="text-center">
                                    <td><%- i+1 %></td>
                                    <td><a href="/comment/my?author=<%- item.author %>"> <%- item.author %> <span class="text-danger">  <%- username == item.author ? '楼主':'' %> </span> </a></td>
                                    <td style="width:120px;word-break: break-all;"><a href="/comment/detail?_id=<%- item._id%>"><%- item.title %></a></td>
                                    <td style="width:280px;word-break: break-all;"><%- item.content %></td>
                                    <td style="width:150px;"><%- item.movie.title %></td>
                                    <td>
                        
                                        <a href="/comment/moviepin?mid=<%-item.mid%>"><img width="80px" height="80px" src="<%- item.movie.images.large.replace(/img7/,'img3')%>" alt=""></a></td>
                                    <td><%- item.time %></td>
                                    <td style="width:220px;">
                                        <button class="btn btn-success" id="showbtn" data-item='<%- JSON.stringify(item) %>' onclick="showThisAnswer(this) " data-toggle="modal" data-target="#showanswer">查看回复</button>
                                        <%    if(username == item.author){      %>
                                                <button class="btn btn-info" onclick="window.location.href='/comment/updata?_id=<%- item._id%>'">修改</button>
                                                <button onclick="getDelid('<%- item._id%>')" class="btn btn-danger" data-toggle="modal" data-target="#delbox">删除</button>
                                      <%    }                   %>
                                           
                          
                                    </td>
                                </tr>
                        <%     })           %>
                        <tr>
                            <td colspan="5">
                                <nav aria-label="Page navigation" >
                                    <ul class="pagination">
                                        <li>
                                            <a href="/comment/list?page=<%-page - 1 %>&pageSize=<%- pageSize%>" aria-label="Previous">
                                              <span aria-hidden="true">&laquo;</span>
                                            </a>
                                          </li>
                                          <li><a href="/comment/list?page=<%-page -2  %>&pageSize=<%- pageSize%>" ><%- page-2  %></a></li>
                                          <li><a href="/comment/list?page=<%-page -1  %>&pageSize=<%- pageSize%>"><%- page-1 %></a></li>
                                          <li class="active "><a href="/comment/list?page=<%-page%>&pageSize=<%- pageSize%>"> <%- page %></a></li>
                                          <li><a href="/comment/list?page=<%-page + 1 %>&pageSize=<%- pageSize%>"><%- page + 1 %></a></li>
                                          <li><a href="/comment/list?page=<%-page + 2 %>&pageSize=<%- pageSize%>"><%- page + 2 %> </a></li>
                                          <li>
                                            <a href="/comment/list?page=<%-page + 1 %>&pageSize=<%- pageSize%>" aria-label="Next">
                                              <span aria-hidden="true">&raquo;</span>
                                            </a>
                                          </li>
                                    </ul>
                                  </nav>
                            </td>
                            <td colspan="3" >
                                <div class="pull-right" style="display:flex">
                                    <p>第 <%- page%>  页 / 每页 <%- pageSize%> 条</p>
                                    <p>---</p>
                                    <p>总 <%- total%>  条 / 共 <%- totalPage%> 页</p>
                                   
                                </div>
                            </td>
                        </tr>





                        <%     }else{%>
                            <tr >
                                <td colspan="8" class="text-success">
                                    暂无数据，请马上添加评论
                                </td>
                            </tr>
                            <%     }%>
                  
                    </tbody>
                </table>
               
            </div>

        </div>
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" id="showanswer">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">来自网页回复 -- <span class="text-danger" id="mtitle">融绿</span></h4>
              <h6 id="thistitle"></h6>
            </div>
            <div class="modal-body" id="answerlist">
                
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-success" id="gotodetail" onclick="gotodetail(this)" >添加回复</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->

      <div class="modal fade" tabindex="-1" role="dialog" id="delbox">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">删除评论</h4>
            </div>
            <div class="modal-body" >
                <p>你确定要删除这条评论吗?</p>
            </div>
            <div class="modal-footer">
             
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-danger" onclick="delsubmit()"  >确定删除</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
</div>
    <%- include  foot %>
</body>
<script>
    $('#select').on('change',function(){
        var page = $(this).attr('data-page');
        var pageSize = $(this).val();
        window.location.href = '/comment/list?page='+page+'&pageSize='+pageSize
    })

    function showThisAnswer(that){
        var item = JSON.parse($(that).attr('data-item'))
        console.log(item);
        $('#mtitle').html(item.movie.title);
        $('#thistitle').html(item.title)
        $('#answerlist').html('')
        $('#gotodetail').attr('data-id',item._id)
        var oDiv = ''
        item.answer&&item.answer.forEach(val=>{
            oDiv += 
            `<div style="display: flex;justify-content: space-between;">
                <p class=" text-warning"> #  ${val.id} </p>
                <p> 来自:${val.author?val.author :'佚名'}</p>                   
            </div>
            <div style="display: flex;justify-content: space-between;border-bottom:1px dashed red;padding-bottom:5px">
                <p class=" text-danger"> 内容 :${val.subtitle}</p>
                <p class=" text-warning"> 时间 :${val.time}</p>
            </div>`;
        })
        $('#answerlist').html(oDiv?oDiv:'暂无网友回复')
    }

    function gotodetail(that){
        window.location.href = '/comment/detail?_id='+$(that).attr('data-id')
    }
    var itemId = null;
    //删除函数
    function getDelid(_id){
        console.log((_id));
        itemId = _id
    }
    function delsubmit(){
        $.ajax({
            url:"/comment/delsubmit",
            method:"POST",
            data:{
                _id:itemId
            },
            success:res=>{
                console.log(res);
                if(res.code == 200){
                    window.location.reload();
                }
            }
        })
    }
</script>
</html>